<template>
	<el-row style="background: #f3f6fa;">
		<el-row style="margin: 2vh 10vw 0px 10vw;">
			<el-row style="padding: 1vh 0;">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/ListItem/ListItem' }">列表</el-breadcrumb-item>
					<el-breadcrumb-item>拍卖组列表</el-breadcrumb-item>
				</el-breadcrumb>
			</el-row>

			<el-row class="Particulars-hader">
				<el-col :span="17">
					<el-image :src="dat.img"></el-image>
				</el-col>
				<el-col class="Particulars-hader-card" :span="7">
					<el-row>
						{{dat.hader_title.title}}
					</el-row>
					<el-row>
						<el-col v-for="(item,index) in dat.hader_title.min_title" :key='index'>
							<el-col>
								{{item.key}}
							</el-col>
							<el-col>
								{{item.vel}}
							</el-col>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-button @click="to_paring" type="danger">进入</el-button>
						</el-col>
					</el-row>
					<el-row type="flex" justify="center">
						<el-col class="y_flex y_flex_ju_end" :span="3">{{dat.hader_title.maxNum}}</el-col>
						<el-divider direction="vertical"></el-divider>
						<el-col class="y_flex y_flex_al_cen" :span="3">{{dat.hader_title.Pop}}</el-col>
					</el-row>
				</el-col>
			</el-row>

			<el-row class="Particulars-Nav">
				<el-tabs type="border-card">
					<el-tab-pane v-for="(item,index) in NavList" :key="index" :label="item.label">
						<el-row :gutter="20" class="Particulars-Nav-card" v-if="item.label == '拍卖列表'">
							<el-col :span="6" v-for="(o, indexs) in dat.DatList" :key="indexs">
								<el-card :body-style="{ padding: '0px' }">
									<img :src="o.img" class="image">
									<div style="padding: 14px;">
										<span>{{o.title}}</span>
										<div class="bottom clearfix">
											<time class="time">{{o.time}}</time>
											<el-button @click="to_paring" type="text" class="button">操作按钮</el-button>
										</div>
									</div>
								</el-card>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
			</el-row>
		</el-row>
	</el-row>
</template>

<script>
	export default {
		data() {
			return {
				dat: {
					img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
					hader_title: {
						title: '标题',
						min_title: [{
							key: '标签',
							vel: '内容'
						}],
						time: '时间',
						maxNum: 5,
						Pop: 5421
					},
					DatList: [{
							id: 1,
							img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
							title: '好吃的汉堡',
							time: '123',
						},
						{
							id: 1,
							img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
							title: '好吃的汉堡',
							time: '123',
						},
						{
							id: 1,
							img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
							title: '好吃的汉堡',
							time: '123',
						},
						{
							id: 1,
							img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
							title: '好吃的汉堡',
							time: '123',
						},
						{
							id: 1,
							img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
							title: '好吃的汉堡',
							time: '123',
						},
					]
				},
				NavList: [{
						label: '拍卖列表'
					},
					{
						label: '公告'
					}
				],
			}
		},
		methods: {
			to_paring() {
				this.$router.push('/ListItem/ParticularIng')
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'Particulars.scss'
</style>
